<template>
  <div class="hello">
    <p @click="goOtherPage('about')">关于Vue</p>
    <p @click="goOtherPage('test')">测试页面</p>
    <p @click="goOtherPage('multiVModel')">多个 v-model 绑定示例</p>
    <p @click="goOtherPage('slotTemp')">slot 示例</p>
    <p @click="goOtherPage('provide')">provide / inject (长距离的props) 示例（选项式API）</p>
    <p @click="goOtherPage('transition')">过渡 & 动画</p>
    <p @click="goOtherPage('setupTemp')">组合式 API</p>
    <p @click="goOtherPage('customInstruction')">自定义指令</p>
    <p @click="goOtherPage('teleportDom')">Teleport标签</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  components: {},
  props: {
    user: {
      type: String,
      required: false,
    },
  },
  emits: [],
  data() {
    return {};
  },
  methods: {
    goOtherPage(path) {
      this.$router.push("/" + path);
    },
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
p {
  cursor: pointer;
}
</style>
